<template>
  <!-- 首页头部 -->
  <HomeHeader :address="address"></HomeHeader>
  <!-- 搜索框 -->
  <Search @click="goPage('search')"></Search>
  <!-- 轮播图 -->
  <div class="banner">
    <Swipe :sliderList="sliderList" :height="height"></Swipe>
  </div>

  <!-- 九宫格 -->
  <div class="grid-wrapper">
    <Grid :gridConfiguration="gridConfiguration"></Grid>
  </div>
  <!-- 分割 -->
  <div class="line"></div>
  <!-- 图文组件 -->
  <div class="picText-wrapper">
    <h3>附近商铺</h3>
    <Piclist :shopList="shopList" v-if="shopList.list&&shopList.list.length>0" :isShowPic="isShowPic"> </Piclist>
		<van-empty v-else
			image="https://cdn.jsdelivr.net/npm/@vant/assets/custom-empty-image.png"
			image-size="80"
			description="暂无数据"
		/>
  </div>
</template>
<script lang="ts">
//组件引入
import HomeHeader from './home-header.vue'
import Search from '@comp/search/index.vue'
import Swipe from '@comp/swipe/index.vue'
import Grid from '@comp/grid/index.vue'
import Piclist from '@comp/pictextList/index.vue'

import { defineComponent, computed, onBeforeMount, reactive } from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import { IGlobalState } from '@/store'
import { directionName } from '@/typeings/home'
import * as Types from '@/store/action-types'


export default defineComponent({
  components: {
    HomeHeader,
    Search,
    Swipe,
    Grid,
    Piclist,
  },
  setup() {
		const router = useRouter()
    // store 专门修改分类使用
    let store = useStore<IGlobalState>()
    let sliderList = computed(() => store.state.home.sliders)
    let gridConfiguration = computed(() => store.state.home.gridConfiguration)
    let shopList = computed(() => store.state.home.shopList)
		let address = computed(() => store.state.home.address)
    //获取bannger
    const getSlicerList = () => {
      store.dispatch(`home/${Types.SET_SLIDERLIST}`)
    }
		let config = reactive({
      columnNum: 5, //列数
      square: false, //是否正方形鸽子
      gutter: 0, //各自间距
      border: false, //是否显示边距
      isCustom: true, // 是否自定义
      direction: directionName[1], //horizontal呈横向排列。vertical纵向
    })
    //获取九宫格
    const getGridList = () => {
      store.dispatch(`home/${Types.SET_GRIDLIST}`,config)
    }
    //获取店铺
    const getShopList = () => {
      store.dispatch(`home/${Types.SET_SHOPLIST}`)
    }
		const goPage = (pageName:string)=>{
			router.push({
        path: pageName || '/'
      })
		}
    onBeforeMount(async () => {
      if (sliderList.value.length == 0) {
        // 缓存 没有数据
        getSlicerList()
      }
      if (gridConfiguration.value.data.length==0) {
        // 缓存 没有数据
        getGridList()
        // gridConfiguration.value = 
      }
      if (shopList.value.list.length == 0) {
        // 缓存 没有数据
        getShopList()
      }
    })
    return {
      height: '140',
			address,
      sliderList,
      gridConfiguration,
      shopList,
			isShowPic:false,
			goPage
    }
  },
})
</script>
<style lang="scss">
@import '@/styles/viriables.scss';
.banner {
  margin: 0 18px;
  //处理加载页面 抖动
  height: 0;
  overflow: hidden;
  padding-bottom: 37%; //图片宽高比 高/宽
}
.grid-wrapper,
.picText-wrapper {
  padding: 0 18px;
}
.line {
  width: 100%;
  height: 10px;
  background-color: $bg-color;
}
</style>
